<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="HolyGrail">
    <div class="box">
        <div class="dice one">
            <span class="item"></span>
        </div>
        <div class="dice two">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="dice three">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="dice four">
            <div class="column">
                 <span class="item"></span>
                 <span class="item"></span>
            </div>
            <div class="column">
                 <span class="item"></span>
                 <span class="item"></span>
            </div>
        </div>
        <div class="dice five">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="dice six">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="dice seven">
            <div class="column">
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="dice eight">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="dice nine">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    </div>
    <header>#header</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
    </div>
    <footer>#footer</footer>
</div>
</body>
</html>